/*
 * @Author       : 梁嘉琳
 * @Date         : 2022-07-26 10:17:00
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-07-28 09:32:51
 * @FilePath     : \web3d\my\examples\viewhelper\src\script.js
 */
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { TrackballControls } from "three/examples/jsm/controls/TrackballControls.js";

import { ViewHelper } from "./ViewHelper";

const canvas = document.querySelector(".webgl");
const container = document.querySelector("#div");

const w = container.clientWidth;
const h = container.clientHeight;

const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(w, h);
//加上才能叠加
renderer.autoClear = false;

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
camera.position.x = 5;
// camera.up = new THREE.Vector3(0, 0, 1);
scene.add(camera);
const viewHelper = new ViewHelper(camera, container);

// new OrbitControls(camera, renderer.domElement);
const controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 4;
controls.zoomSpeed = 0.6;

const object = new THREE.Object3D();

const geometry = new THREE.PlaneGeometry(1, 1);
const pi = Math.PI * 0.5;

{
  const plane1 = new THREE.Mesh(geometry, getSpriteMaterial("前"));
  plane1.position.x = 0.5;
  plane1.rotation.y = pi;
  plane1.rotation.x = pi;
  plane1.userData.type = "+X";
  object.add(plane1);

  const plane2 = new THREE.Mesh(geometry, getSpriteMaterial("后"));
  plane2.position.x = -0.5;
  plane2.rotation.y = -pi;
  plane2.rotation.x = pi;
  plane2.userData.type = "-X";
  object.add(plane2);

  const plane3 = new THREE.Mesh(geometry, getSpriteMaterial("上"));
  plane3.position.z = 0.5;
  plane3.rotation.z = pi;
  plane3.userData.type = "+Z";
  object.add(plane3);

  const plane4 = new THREE.Mesh(geometry, getSpriteMaterial("下"));
  plane4.position.z = -0.5;
  plane4.rotation.x = 2 * pi;
  plane4.rotation.z = -pi;
  plane4.userData.type = "-Z";
  object.add(plane4);

  const plane5 = new THREE.Mesh(geometry, getSpriteMaterial("右"));
  plane5.position.y = 0.5;
  plane5.rotation.x = -pi;
  plane5.rotation.z = 2 * pi;
  plane5.userData.type = "+Z";
  object.add(plane5);

  const plane6 = new THREE.Mesh(geometry, getSpriteMaterial("左"));
  plane6.position.y = -0.5;
  plane6.rotation.x = pi;
  plane6.userData.type = "-Y";
  object.add(plane6);
}

scene.add(object);

{
  const dirx = new THREE.Vector3(1, 0, 0);
  const diry = new THREE.Vector3(0, 1, 0);
  const dirz = new THREE.Vector3(0, 0, 1);
  dirx.normalize();
  diry.normalize();
  dirz.normalize();

  const origin = new THREE.Vector3(0, 0, 0);

  scene.add(new THREE.ArrowHelper(dirx, origin, 2, 0xff3653));
  scene.add(new THREE.ArrowHelper(diry, origin, 2, 0x8adb00));
  scene.add(new THREE.ArrowHelper(dirz, origin, 2, 0x2c8fff));
}

const clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
  viewHelper.render(renderer);
  controls.update();
  const delta = clock.getDelta();
  if (viewHelper.animating === true) {
    viewHelper.update(delta);
  }
});

function getSpriteMaterial(text, color = new THREE.Color("#f8f8f8")) {
  const canvas = document.createElement("canvas");
  canvas.width = 128;
  canvas.height = 128;

  const context = canvas.getContext("2d");
  context.strokeRect(0, 0, 128, 128);
  context.fillStyle = color.getStyle();
  context.fillRect(1, 1, 126, 126);

  if (text) {
    context.font = "64px Arial";
    context.textAlign = "center";
    context.fillStyle = "#83aad0";
    context.fillText(text, 64, 85);
  }

  const texture = new THREE.CanvasTexture(canvas);

  return new THREE.MeshBasicMaterial({
    map: texture,
  });
}
